@page
@{ Layout = "_LayoutHome"; }

@section Styles{
    <style>
        .el-descriptions-item__label.is-bordered-label {
            width: 180px;
        }
    </style>
}

<el-card>
    <el-row :gutter="5">
        <el-col :span="7" style="text-align:center;">
            <div class="card rounded-3 card-bordered card-hover border-muted border-1">
                <div class="d-flex flex-column gap-3">
                    <div class="bg-cover rounded-0 p-8 z-1 rounded-top-3" :style="{'background-image':'url('+(user.avatarbgUrl || DEFAULT_AVATAR_BG_URL)+')'}">
                        <div class="py-8"></div>
                        <div class="py-5"></div>
                    </div>
                    <div class="mt-n8 z-2">
                        <img :src="user.avatarUrl || DEFAULT_AVATAR_URL" class="img-fluid rounded-pill smooth-shadow-lg avatar-xxl bg-light p-2">
                    </div>
                    <div class="d-flex flex-column gap-4 p-3 pb-4">
                        <div class="d-flex flex-column gap-2">
                            <div class="fs-3">
                                <i class="el-icon-s-custom me-2"></i>{{ user.displayName }}
                            </div>
                            <div>
                                欢迎回来
                            </div>
                        </div>
                        <div>
                            <el-button icon="el-icon-edit" circle v-on:click="btnUserMenuClick('profile')"></el-button>
                            <el-button icon="el-icon-key" circle v-on:click="btnUserMenuClick('password')"></el-button>
                            <el-button icon="el-icon-switch-button" type="warning" circle v-on:click="btnUserMenuClick('logout')"></el-button>
                        </div>
                    </div>
                </div>
            </div>
        </el-col>
        <el-col :span="17">
            <el-scrollbar class="scrollbar" :style="{ height: ($(window).height()-63) + 'px' }">
                <div class="px-3 pb-5">
                    <div class="mb-3">
                        <div class="row g-3">
                            <div class="col-xl-6 col-lg-6 col-md-6 col-6">
                                <apexchart type="radialBar" :options="passChartOptions" :series="passSeries" height="335"></apexchart>
                            </div>
                            <div class="col-xl-6 col-lg-6 col-md-6 col-6">
                                <div class="card card-hover-with-icon border-top border-5 border-light p-3 rounded-3 shadow-lg" style="cursor:default;">
                                    <div class="card card-hover shadow-lg">
                                        <div class="d-flex justify-content-between align-items-center p-3">
                                            <div>
                                                <el-progress type="dashboard" :percentage="examPercent" color="#5cb87a" :width="60" :stroke-width="4"></el-progress>
                                            </div>
                                            <div class="ms-3">
                                                <h4 class="mb-1">
                                                    <span>累计考试<span class="mx-2 text-success fs-4">{{ examTotal }}</span>场</span>
                                                </h4>
                                                <p class="mb-0 fs-6">
                                                    <span>及格率<span class="ms-2 text-success fs-4">{{ examPercent }}<span class="fs-6 fw-light ms-1">%</span></span></span>
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="card card-hover shadow-lg mt-3">
                                        <div class="d-flex justify-content-between align-items-center p-3">
                                            <div>
                                                <el-progress type="dashboard" :percentage="examMoniPercent" color="#5cb87a" :width="60" :stroke-width="4"></el-progress>
                                            </div>
                                            <div class="ms-3">
                                                <h4 class="mb-1">
                                                    <span>累计模拟自测<span class="mx-2 text-success fs-4">{{ examMoniTotal }}</span>场</span>
                                                </h4>
                                                <p class="mb-0 fs-6">
                                                    <span>及格率<span class="ms-2 text-success fs-4">{{ examMoniPercent }}<span class="fs-6 fw-light ms-1">%</span></span></span>
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="card card-hover shadow-lg mt-3">
                                        <div class="d-flex justify-content-between align-items-center p-3">
                                            <div>
                                                <el-progress type="dashboard" :percentage="practiceAnswerPercent" color="#5cb87a" :width="60" :stroke-width="4"></el-progress>
                                            </div>
                                            <div class="ms-3">
                                                <h4 class="mb-1">
                                                    <span>累计刷题<span class="mx-2 text-success fs-4">{{ practiceAnswerTmTotal }}</span>道</span>
                                                </h4>
                                                <p class="mb-0 fs-6">
                                                    <span>正确率<span class="ms-2 text-success fs-4">{{ practiceAnswerPercent }}<span class="fs-6 fw-light ms-1">%</span></span></span>
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card card-hover-with-icon border-top border-5 border-light p-3 mb-3" style="cursor:default;">
                        <el-card shadow="hover">
                            <div slot="header" class="d-flex justify-content-between align-items-center">
                                <span class="fw-bold"><i class="el-icon-platform-eleme me-2 text-warning bg-light p-2 card-icon rounded-circle"></i>最近一场考试安排</span>
                                <el-link :underline="false" v-on:click="btnMoreMenuClick('examPaper')">更多<i class="el-icon-more ms-2"></i></el-link>
                            </div>
                            <div class="row align-items-center g-3" v-if="examPaper">
                                <div class="col">
                                    <div class="mb-2">
                                        <el-link :underline="false" v-on:click="btnViewPaperClick(examPaper.id)">
                                            <span class="fw-bold">{{ examPaper.title }}</span>
                                        </el-link>
                                    </div>
                                    <ul class="list-inline fw-light">
                                        <li class="list-inline-item fs-5">
                                            总分：{{ examPaper.totalScore }}
                                        </li>
                                        <li class="list-inline-item fs-5">
                                            及格分：{{ examPaper.passScore }}
                                        </li>
                                        <li class="list-inline-item fs-5">
                                            剩余考试次数：
                                            <span class="fs-3 text-success fw-bold" v-if="(examPaper.userExamTimes-examPaper.myExamTimes)>0">
                                                {{ examPaper.userExamTimes-examPaper.myExamTimes }}
                                            </span>
                                            <span class="fs-3 text-danger fw-bold" v-else>
                                                0
                                            </span>
                                            /{{ examPaper.userExamTimes }}
                                        </li>
                                    </ul>
                                    <ul class="list-inline fw-light">
                                        <li class="list-inline-item fs-5">
                                            <i class="el-icon-date me-2"></i>开考时间：{{ examPaper.examStartDateTimeStr }}
                                        </li>
                                    </ul>
                                </div>
                                <div class="col-auto">
                                    <div class="bg-light p-2 rounded-pill">
                                        <el-button type="primary" plain icon="el-icon-s-order" class="rounded-pill" v-on:click="btnViewPaperClick(examPaper.id)">详 细</el-button>
                                    </div>
                                </div>
                            </div>
                            <div v-else>
                                <el-empty image="/sitefiles/assets/images/nodata.svg" image-size="88" description="暂无考试安排"></el-empty>
                            </div>
                        </el-card>
                    </div>
                    <div class="card card-hover-with-icon border-top border-5 border-light p-3 mb-3" style="cursor:default;">
                        <el-card shadow="hover">
                            <div slot="header" class="d-flex justify-content-between align-items-center">
                                <span class="fw-bold">
                                    <i class="el-icon-s-order me-2 text-warning bg-light p-2 card-icon rounded-circle"></i>刷题练习
                                </span>
                                <el-link :underline="false" v-on:click="btnMoreMenuClick('examPractice')">更多<i class="el-icon-more ms-2"></i></el-link>
                            </div>
                            <div>
                                <div class="row text-center">
                                    <div class="col p-3">
                                        <div class="mb-3">
                                            <el-progress type="dashboard" :percentage="practiceAllPercent" color="#5cb87a" :width="88" :stroke-width="4"></el-progress>
                                            <div class="fs-6">正确率</div>
                                        </div>
                                        <div class="mb-3 p-2 bg-light w-100 rounded-pill">
                                            <el-button type="warning" plain class="py-4 w-100 rounded-pill" v-on:click="btnCreatePracticeClick('All')"><i class="bi bi-fast-forward-circle-fill me-2"></i>快速开始</el-button>
                                        </div>
                                        <div class="fs-6 fw-light">共<span class="fs-4 fw-bold mx-2">{{ practiceAllTmTotal }}</span>道题</div>
                                    </div>
                                    <div class="col p-3">
                                        <div class="mb-3">
                                            <el-progress type="dashboard" :percentage="practiceCollectPercent" color="#5cb87a" :width="88" :stroke-width="4"></el-progress>
                                            <div class="fs-6">正确率</div>
                                        </div>
                                        <div class="mb-3 p-2 bg-light w-100 rounded-pill">
                                            <el-button type="primary" plain class="py-4 w-100 rounded-pill" v-on:click="btnCreatePracticeClick('Collect')"><i class="bi bi-person-hearts me-2"></i>收藏练习</el-button>
                                        </div>
                                        <div class="fs-6 fw-light">共<span class="fs-4 fw-bold mx-2">{{ practiceCollectTmTotal }}</span>道题</div>
                                    </div>
                                    <div class="col p-3">
                                        <div class="mb-3">
                                            <el-progress type="dashboard" :percentage="practiceWrongPercent" color="#5cb87a" :width="88" :stroke-width="4"></el-progress>
                                            <div class="fs-6">正确率</div>
                                        </div>
                                        <div class="mb-3 p-2 bg-light w-100 rounded-pill">
                                            <el-button type="success" plain class="py-4 w-100 rounded-pill" v-on:click="btnCreatePracticeClick('Wrong')"><i class="bi bi-backspace-reverse me-2"></i>错题练习</el-button>
                                        </div>
                                        <div class="fs-6 fw-light">共<span class="fs-4 fw-bold mx-2">{{ practiceWrongTmTotal }}</span>道题</div>
                                    </div>
                                </div>
                            </div>
                        </el-card>
                    </div>
                    <div class="card card-hover-with-icon border-top border-5 border-light p-3 mb-3" style="cursor:default;">
                        <el-card shadow="hover">
                            <div slot="header" class="d-flex justify-content-between align-items-center">
                                <span class="fw-bold"><i class="el-icon-eleme me-2 text-warning bg-light p-2 card-icon rounded-circle"></i>最新一场模拟自测</span>
                                <el-link :underline="false" v-on:click="btnMoreMenuClick('examPaperMoni')">更多<i class="el-icon-more ms-2"></i></el-link>
                            </div>
                            <div class="row align-items-center g-3" v-if="examMoni">
                                <div class="col">
                                    <div class="mb-2">
                                        <el-link :underline="false" v-on:click="btnViewPaperClick(examMoni.id)">
                                            <span class="fw-bold">{{ examMoni.title }}</span>
                                        </el-link>
                                    </div>
                                    <ul class="list-inline fw-light">
                                        <li class="list-inline-item fs-5">
                                            总分：{{ examMoni.totalScore }}
                                        </li>
                                        <li class="list-inline-item fs-5">
                                            及格分：{{ examMoni.passScore }}
                                        </li>
                                        <li class="list-inline-item fs-5">
                                            剩余考试次数：
                                            <span class="fs-3 text-success fw-bold" v-if="(examMoni.userExamTimes-examMoni.myExamTimes)>0">
                                                {{ examMoni.userExamTimes-examMoni.myExamTimes }}
                                            </span>
                                            <span class="fs-3 text-danger fw-bold" v-else>
                                                0
                                            </span>
                                            /{{ examMoni.userExamTimes }}
                                        </li>
                                    </ul>
                                    <ul class="list-inline fw-light">
                                        <li class="list-inline-item fs-5">
                                           <i class="el-icon-date me-2"></i>有效期：{{ examMoni.examStartDateTimeStr }}-{{ examMoni.examEndDateTimeStr }}
                                        </li>
                                    </ul>
                                </div>
                                <div class="col-auto">
                                    <div class="bg-light p-2 rounded-pill">
                                        <el-button type="primary" plain icon="el-icon-s-order" class="rounded-pill" v-on:click="btnViewPaperClick(examMoni.id)">详 细</el-button>
                                    </div>
                                </div>
                            </div>
                            <div v-else>
                                <el-empty image="/sitefiles/assets/images/nodata.svg" image-size="88" description="暂时没有开放的模拟练习"></el-empty>
                            </div>
                        </el-card>
                    </div>
                    <div class="mb-3">
                        <div class="card card-hover-with-icon border-top border-3">
                            <div class="card-body">
                                <h5 class="card-title d-flex justify-content-between align-items-center">
                                    <span><i class="bi bi-award-fill me-2 card-icon text-warning p-2"></i>最新获得证书</span>
                                    <el-link :underline="false" v-on:click="btnMoreMenuClick('examPaperCer')">更多<i class="el-icon-more ms-2"></i></el-link>
                                </h5>
                                <div class="mt-4">
                                    <div class="card card-hover" v-if="topCer && topCer.id>0" v-on:click="btnViewCer(topCer)" style="cursor:pointer;">
                                        <div class="row g-0">
                                            <img :src="topCer.cerImg" class="w-100">
                                        </div>
                                    </div>
                                    <div v-else>
                                        <el-empty image="/sitefiles/assets/images/nodata.svg" image-size="88" description="还没有获得过证书"></el-empty>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                        <div class="card card-hover-with-icon border-top border-5 border-light p-3" style="cursor:default;">
                        <el-card shadow="hover">
                            <div class="mb-2 d-flex justify-content-start align-items-center">
                                <el-avatar icon="el-icon-user-solid" :src="user.avatarUrl || DEFAULT_AVATAR_URL"></el-avatar>
                                <div class="ms-2">
                                    <span>个人信息</span>
                                </div>
                            </div>
                            <div>
                                <el-descriptions title="" border column="1">
                                    <el-descriptions-item label="账 号">{{ user.userName }}</el-descriptions-item>
                                    <el-descriptions-item label="姓 名">{{ user.displayName }}</el-descriptions-item>
                                    <el-descriptions-item label="组 织">{{ user.organNames }}</el-descriptions-item>
                                    <el-descriptions-item label="手 机">{{ user.mobile }}</el-descriptions-item>
                                    <el-descriptions-item label="邮 箱">{{ user.email }}</el-descriptions-item>
                                    <el-descriptions-item label="上次登录时间">{{ user.lastActivityDate }}</el-descriptions-item>
                                    <el-descriptions-item label="登录次数">{{ user.countOfLogin }}</el-descriptions-item>
                                </el-descriptions>
                            </div>
                        </el-card>
                        </div>
               
                    <div class="my-5 text-center fs-5">
                        <small>没有了</small>
                    </div>
                </div>
            </el-scrollbar>
        </el-col>
    </el-row>
</el-card>

@section Scripts{
<script src="/sitefiles/assets/lib/apexcharts/apexcharts.js" type="text/javascript"></script>
<script src="/sitefiles/assets/lib/apexcharts/vue-apexcharts.js" type="text/javascript"></script>
<script src="/sitefiles/assets/js/home/dashboard.js" type="text/javascript"></script> }